<template>
  <div class="dateHeader">
    <div
      v-for="item in list"
      :key="item.value"
      class="dateHeader-item"
      :class="{active:item.active}"
      @click="handleClick(item)"
    >
      {{ item.text }}
    </div>
    <div class="line" />
    <div
      class="today"
      @click="backToday"
    >
      今天
    </div>
    <div
      class="big today"
      @click="toggleFullscreen"
    />
  </div>
</template>

<script>
export default {
  name: 'DateHeader',
  data () {
    return {
      list: [
        { text: '周', value: 'week', active: true },
        { text: '月', value: 'month' },
        { text: '季', value: 'quarter' },
        { text: '年', value: 'year' }
      ]
    }
  },
  methods: {
    handleClick (item) {
      this.list.forEach(v => {
        this.$set(v, 'active', false)
      })
      this.$set(item, 'active', true)
      this.$emit('click', item)
    },
    backToday () {
      this.$emit('backToday')
    },
    toggleFullscreen () {
      this.$emit('toggleFullscreen')
    }
  }
}
</script>

<style>
.dateHeader{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    background: #fff;
}
.line{
  width: 1px;
  height: 12px;
  background: #E8E8E8;
  margin-right: 8px;
}
.dateHeader-item{
    font-size: 14px;
    margin-right:22px;
    line-height: 24px;
    text-align: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
}
.dateHeader-item:hover{
    background-color: #f5f5f5;
    border-radius: 4px;
}
.dateHeader-item.active{
    background-color: #F5F6F7;
    color: #0085FF;
    border-radius: 4px;
}
.today{
  font-size: 12px;
  cursor: pointer;
  padding-left: 8px;
  margin-right: 10px;
}
.big{
  width: 24px;
  height: 24px;
  background-image: url("./images/fullscreen.png");
  background-repeat: no-repeat;
    background-position: center center;
}

</style>
